<template>
    <view>
        <!-- 生成等高元素防止塌陷 -->
        <!-- <view :style="{paddingBottom: 66 + safeAreaInsets.bottom + 'px'}"/> -->

        <view
            class="flex around item-center tabBar"
            :style="{
                background,
                position: 'fixed',
                zIndex: 500,
                bottom: 0,
                paddingBottom: safeAreaInsets.bottom + 'px',
                borderTop: '1rpx solid #E2E2E2',
            }"
        >
            <view v-for="(item, index) in tabBarList" :key="item.icon">
                <view @click="onTabBarChange(index)" class="flexColumnCenter" style="padding: 0 56rpx" >
                    <image :src="value === index ? item.activeIcon : item.icon" :style="{fontSize:'50rpx', width: '50rpx', height: '50rpx'}" />
                    <view
                        :class="value === index ? 'activeText' : 'tabText'"
                        :style="{color: value === index ? activeColor : '#9E9F9F', textAlign:'center'}"
                    >
                        {{item.text}}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
		name: "MyTabBar",
		props: {
      value: {
        type: Number,
        required: true,
        default: 0
      },
      activeColor: {
        type: String,
        required: false,
        default: '#65AB6C',
      },
      background: {
        type: String,
        required: false,
        default: '#FFFFFF'
      },
    },
		data() {
			return {
				tabBarList: [
					{
						text: '首页',
						route: '/pages/index/index',
						icon: '/static/images/footerIcon1.svg',
						activeIcon: '/static/images/activeFooterIcon1.svg',
					},
					{
						text: '我的题库',
						route: '/pages/questionBank/questionBank',
						icon: '/static/images/footerIcon3.svg',
						activeIcon: '/static/images/activeFooterIcon3.svg',
					},
					{
						text: '能力提升',
						route: '/pages/improve/improve',
						icon: '/static/images/footerIcon4.svg',
						activeIcon: '/static/images/activeFooterIcon4.svg',
					},
					{
						text: '我的',
						route: '/pages/user/user',
						icon: '/static/images/footerIcon2.svg',
                        activeIcon: '/static/images/activeFooterIcon2.svg',
					},
				],
        windowWidth: 0,
        windowHeight: 0,
        safeAreaInsets: {},
        isAdmin: false,
			}
		},
        beforeMount() {
            uni.getSystemInfo({
                success: (res) => {
                    this.windowWidth = res.windowWidth
                    this.windowHeight = res.windowHeight
                    this.safeAreaInsets = res.safeAreaInsets
                }
            })
        },
        created() {

        },
		methods: {
			onTabBarChange(index) {
				uni.switchTab({
					url: this.tabBarList[index].route
				})
			}
		}
	}
</script>

<style lang="scss">

* {
    transition: all .5s;
}

.tabBar {
    width: 100%;
    height: 120rpx;
}

.activeText {
    font-size: 24rpx;
    color: #3c9cff;
}
.tabText {
    font-size: 24rpx;
    color: #9E9F9F;
}

.activeImage {
    width: 70rpx;
    height: 70rpx;
    padding-bottom: 30rpx;
}

.tabBar, .activeImage {
    border-collapse: collapse;
}
.flexColumnCenter{
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
}
</style>
